<template>
  <div class="agent-dashboard">
    <h1>区域代理控制台</h1>

    <!-- 数据概览卡片 -->
    <div class="overview-cards">
      <OverviewCard title="累计佣金总额" :value="userDataInfo.commission_money_total"
        :growth="dashboardData.growthRates.salesGrowth" icon="fa-dollar-sign" :currency="true" />

      <OverviewCard title="已提现佣金" :value="userDataInfo.withdrawal_money"
        :growth="dashboardData.growthRates.ordersGrowth" icon="fa-shopping-bag" />

      <OverviewCard title="本月佣金总额" :value="userDataInfo.month_money_total"
        :growth="dashboardData.growthRates.distributorsGrowth" icon="fa-users" />

      <OverviewCard title="待结算佣金" :value="userDataInfo.wait_money" :growth="dashboardData.growthRates.todaySalesGrowth"
        icon="fa-chart-line" :currency="true" />

      <OverviewCard title="可提现佣金" :value="userDataInfo.withdraw_funds"
        :growth="dashboardData.growthRates.commissionGrowth" icon="fa-money-bill-wave" :currency="true" />

      <!-- <OverviewCard title="分销商佣金" :value="dashboardData.pendingCommission"
        :growth="dashboardData.growthRates.pendingCommissionGrowth" icon="fa-hand-holding-usd" :currency="true" />
     -->
    </div>

    <!-- 趋势图表区域 -->
    <!-- <div class="dashboard-card full-width chart-container">
      <h3>销售与佣金趋势</h3>
      <p class="card-description">查看区域内销售额、订单数和佣金金额的变化趋势，支持7/30/90天数据查看。</p>
      <SalesTrendChart />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import OverviewCard from '@/components/agent/dashboard/OverviewCard.vue';
import SalesTrendChart from '@/components/agent/charts/SalesTrendChart.vue';
import { generateDashboardOverviewData } from '@/utils/agentMock';
import { getRegionUserDataInfoApi } from '@/api/index'
import { ElMessage } from 'element-plus';

// 默认数据结构
const defaultData = {
  totalSales: 0,
  todaySales: 0,  // 添加今日业绩字段
  totalOrders: 0,
  distributorsCount: 0,
  totalCommission: 0,
  pendingCommission: 0,
  growthRates: {
    salesGrowth: 0,
    todaySalesGrowth: 0,  // 添加今日业绩增长率
    ordersGrowth: 0,
    distributorsGrowth: 0,
    commissionGrowth: 0,
    pendingCommissionGrowth: 0  // 添加分销商佣金增长率
  }
};

const dashboardData = ref(defaultData);

onMounted(() => {
  // 加载模拟数据
  dashboardData.value = generateDashboardOverviewData();

  // 确保FontAwesome图标正确加载
  if (typeof window !== 'undefined' && window.FontAwesome) {
    window.FontAwesome.dom.watch();
  }
});

const userDataInfo = ref({})

const getUserDataInfoRequest = async () => {
  try {
    const res = await getRegionUserDataInfoApi({})

    userDataInfo.value = res.data
  } catch (error) {
    console.log(error);
    ElMessage({
      type: 'error',
      message: error.msg
    })
  }
}

getUserDataInfoRequest()
</script>

<style lang="scss" scoped>
.agent-dashboard {
  padding: 24px;
  background-color: #f8fafc;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

h1 {
  margin-top: 0;
  margin-bottom: 24px;
  color: #1e293b;
  font-size: 24px;
  font-weight: 600;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #38bdf8);
    border-radius: 3px;
  }
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.chart-container {
  margin-bottom: 24px;
}

.dashboard-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(226, 232, 240, 0.7);
  transition: all 0.3s ease;
  height: 100%;
  min-height: 200px;
  position: relative;

  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }

  &.full-width {
    grid-column: 1 / -1;
    min-height: 400px;
  }
}

.dashboard-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #1e293b;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;

  &:before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    background: linear-gradient(45deg, #3b82f6, #38bdf8);
    border-radius: 4px;
  }
}

.card-description {
  margin-bottom: 16px;
  color: #64748b;
  font-size: 14px;
}

.card-content {
  color: #64748b;
  font-size: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 修复状态样式 */
:deep(.status-tag) {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;

  &:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }

  &.status-active {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;

    &:before {
      background-color: #10b981;
    }
  }

  &.status-inactive {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;

    &:before {
      background-color: #ef4444;
    }
  }

  &.status-pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;

    &:before {
      background-color: #f59e0b;
    }
  }
}

/* 修复FontAwesome图标兼容性 */
:deep(.fa),
:deep(.fas),
:deep(.far),
:deep(.fab) {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  .agent-dashboard {
    padding: 16px;
  }

  h1 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .overview-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dashboard-card {
    padding: 16px;
  }

  .card-description {
    margin-bottom: 12px;
  }
}

/* 修复IE11兼容性问题 */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .overview-cards {
    display: flex;
    flex-wrap: wrap;
  }

  .overview-cards>* {
    flex: 1 1 280px;
    margin-right: 24px;
    margin-bottom: 24px;
  }

  .full-width {
    flex: 1 1 100% !important;
  }
}
</style>
